import {useMemo,  useState} from 'react'
// import Taro from '@tarojs/taro'

/**
 * 旅游伸缩盒子逻辑
 */
export const useFlex = () => {
  const [y, setY] = useState(0)
  // const [top, setTop] = useState(0)
  // const detal = useRef(-1)

  const styled = useMemo(() => {
    return {
      transform: `translate3d(0, ${y}px, 0)`,
      // 199
      transition: y ===  269 - 30 || y === 0 ? 'all ease-in 0.2s' : ''
    }
  }, [y])

  function onclickBtn () {
    if (y === 0) {
      setY(269 - 30)
    } else {
      setY(0)
    }
  }

  // 获取盒子离顶部的高度
  // useEffect(() => {
  //   const info = Taro.getSystemInfoSync()
  //   setTop(info.screenHeight - 199 - 59)
  // }, [])

  // /**
  //  * 开始移动
  //  * @param e
  //  */
  // function ontouchstart(e) {
  //   if (detal.current === -1) {
  //     const touche = e.touches[0]
  //     detal.current = touche.pageY
  //   }
  // }
  //
  // /**
  //  * 移动
  //  * @param e
  //  */
  // function ontouchmove(e) {
  //   const touche = e.touches[0]
  //   let diff = touche.pageY - detal.current
  //   if (diff < 0 || diff > 199 - 30) return
  //   setY(diff)
  // }
  //
  // /**
  //  * 结束移动
  //  * @param e
  //  */
  // function ontouchend(e) {
  //   let pageY = e.changedTouches[0].pageY
  //   if (pageY < top + 199 / 2) {
  //     setY(0)
  //   } else {
  //     setY(199 - 30)
  //   }
  // }

  return {
    onclickBtn, styled
  }
}
